<template>
    <HomePanel title="新鲜好物" sub-tittle="新鲜出炉,品质靠谱">
        <div class="newContent">
            <div class="content" v-for="item in newDataList" :key="item.id">
                <router-link :to="`/details/${item.id}`">
                    <div class="img" @mouseover="hoveredItem = item.id" @mouseleave="hoveredItem = null">
                        <img v-img-lazy ="item.picture" :class="{ 'hovered': hoveredItem === item.id }" alt="">
                    </div>
                    <div class="detail">
                        <div class="name">{{ item.name }}</div>
                        <p class="price">{{ item.price }}元</p>
                    </div>
                </router-link>
            </div>
        </div>
    </HomePanel>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import HomePanel from '../components/HomePanel.vue';
import { getNewAPI } from '@/apis/home';

const newDataList = ref([]);
const hoveredItem = ref(null); // 用于跟踪当前悬停的项目

const getNew = async () => {
    const res = await getNewAPI();
    newDataList.value = res.result;
};

onMounted(() => {
    getNew();
});
</script>

<style lang="scss" scoped>
.newContent {
    padding: 10px 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    background: #fff;

    .content {
        display: flex; 
        flex-direction: column;
        align-items: center; 
        width: 100%;
        height: 450px;

        .img {
            text-align: center;
            width: 300px;
            height: 300px;
            transition: transform 0.2s; /* 添加过渡效果 */
            margin: 10px 30px;
            img {
                width: 100%;
                height: 100%;
                border-radius: 10px;
                object-fit: cover; /* 确保图片覆盖整个容器 */
                transition: transform 0.2s; /* 添加过渡效果 */
            }

            /* 当 hoveredItem 匹配时，应用抬起效果 */
            img.hovered {
                transform: translateY(-5px); /* 向上抬起5px */
            }
        }

        .detail {
            margin-top: 10px;
            background: rgba(64, 224, 208, 0.08); /* 使用 rgba 直接定义颜色 */
            width: 350px;
            height: 95px;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: center; 
            justify-content: center;

            .name {
                text-align: center;
                padding-top: 10px;
                font-size: 20px;
            }

            .price {
                text-align: center;
                padding-top: 10px;
                font-size: 22px;
                color: red;
            }
        }
    }
}
</style>